<template>
    <div class="main">
        <div class="left">
            <div class="left-top">
                <dv-border-box-11 title="交易总览">
                    <div class="wrap-box">
                        <div class="box">
                            <div>累计交易量</div>
                            <div>9999</div>
                        </div>
                        <div class="box">
                            <div>累计交易量</div>
                            <div>9999</div>
                        </div>
                        <div class="box">
                            <div>累计交易量</div>
                            <div>9999</div>
                        </div>
                        <div class="box">
                            <div>累计交易量</div>
                            <div>9999</div>
                        </div>
                        <div class="box">
                            <div>累计交易量</div>
                            <div>9999</div>
                        </div>
                        <div class="box">
                            <div>累计交易量</div>
                            <div>9999</div>
                        </div>
                    </div>
                </dv-border-box-11>
            </div>
            <div class="left-middle">
                <dv-border-box-11 title="土地矿产">
                    <div class="rows-box">
                        <div class="wrap-box">
                            <div class="box-title">土地使用权让出</div>
                            <div class="box">
                                <div>累计交易量</div>
                                <div>9999</div>
                            </div>
                            <div class="box">
                                <div>累计交易量</div>
                                <div>9999</div>
                            </div>
                            <div class="box">
                                <div>累计交易量</div>
                                <div>9999</div>
                            </div>
                            <div class="box">
                                <div>累计交易量</div>
                                <div>9999</div>
                            </div>
                        </div>
                        <div class="columns-box">
                            <div class="box-title">土地使用权让出</div>
                            <div class="box">
                                <div>累计交易量</div>
                                <div>9999</div>
                            </div>
                            <div class="box">
                                <div>累计交易量</div>
                                <div>9999</div>
                            </div>
                        </div>
                    </div>
                </dv-border-box-11>
            </div>
            <div class="left-bottom">
                <dv-border-box-11 title="成交宗地类型">
                    <div class="chart-box">
                        <div id="land" style="width: 100%; height: 380px"></div>
                    </div>
                </dv-border-box-11>
            </div>
        </div>
        <div class="center">
            <dv-border-box-1>
                <div class="wrap-box">
                    <div class="box">
                        <dv-border-box-9 :color="['#4ba5c9', '#00ffff']" backgroundColor="#112231">
                            <div class="box-content">
                                <div class="title">信用指数</div>
                                <div class="value">9999</div>
                            </div>
                        </dv-border-box-9>
                    </div>
                    <div class="box">
                        <dv-border-box-9 :color="['#4ba5c9', '#00ffff']" backgroundColor="#112231">
                            <div class="box-content">
                                <div class="title">信用指数</div>
                                <div class="value">9999</div>
                            </div>
                        </dv-border-box-9>
                    </div>
                    <div class="box">
                        <dv-border-box-9 :color="['#4ba5c9', '#00ffff']" backgroundColor="#112231">
                            <div class="box-content">
                                <div class="title">信用指数</div>
                                <div class="value">9999</div>
                            </div>
                        </dv-border-box-9>
                    </div>
                    <div class="box">
                        <dv-border-box-9 :color="['#4ba5c9', '#00ffff']" backgroundColor="#112231">
                            <div class="box-content">
                                <div class="title">信用指数</div>
                                <div class="value">9999</div>
                            </div>
                        </dv-border-box-9>
                    </div>
                    <div class="box">
                        <dv-border-box-9 :color="['#4ba5c9', '#00ffff']" backgroundColor="#112231">
                            <div class="box-content">
                                <div class="title">信用指数</div>
                                <div class="value">9999</div>
                            </div>
                        </dv-border-box-9>
                    </div>
                    <div class="box">
                        <dv-border-box-9 :color="['#4ba5c9', '#00ffff']" backgroundColor="#112231">
                            <div class="box-content">
                                <div class="title">信用指数</div>
                                <div class="value">9999</div>
                            </div>
                        </dv-border-box-9>
                    </div>
                    <div class="box">
                        <dv-border-box-9 :color="['#4ba5c9', '#00ffff']" backgroundColor="#112231">
                            <div class="box-content">
                                <div class="title">信用指数</div>
                                <div class="value">9999</div>
                            </div>
                        </dv-border-box-9>
                    </div>
                    <div class="box">
                        <dv-border-box-9 :color="['#4ba5c9', '#00ffff']" backgroundColor="#112231">
                            <div class="box-content">
                                <div class="title">信用指数</div>
                                <div class="value">9999</div>
                            </div>
                        </dv-border-box-9>
                    </div>
                </div>
            </dv-border-box-1>
        </div>
        <div class="right">
            <div class="right-top">
                <dv-border-box-11 title="政府采购">
                    <div class="right-top-box">
                        <div class="rows-box">
                            <div class="no-grid-rows-box">
                                <div>
                                    <dv-border-box-13 :color="['#4ba5c9', '#00ffff']" backgroundColor="#093f5c">
                                        <div style="padding: 20px;text-align: left;">采购金额(亿元)</div>

                                    </dv-border-box-13>
                                </div>
                                <div>
                                    <dv-border-box-13 :color="['#4ba5c9', '#00ffff']" backgroundColor="#245b55">
                                        <div style="padding: 20px;text-align: center;">123.45</div>

                                    </dv-border-box-13>
                                </div>
                            </div>
                            <div class="no-grid-rows-box">
                                <div>
                                    <dv-border-box-13 :color="['#4ba5c9', '#00ffff']" backgroundColor="#093f5c">
                                        <div style="padding: 20px;text-align: left;">采购金额(亿元)</div>

                                    </dv-border-box-13>
                                </div>
                                <div>
                                    <dv-border-box-13 :color="['#4ba5c9', '#00ffff']" backgroundColor="#245b55">
                                        <div style="padding: 20px;text-align: center;">123.45</div>

                                    </dv-border-box-13>
                                </div>
                            </div>
                            <div class="no-grid-rows-box">
                                <div>
                                    <dv-border-box-13 :color="['#4ba5c9', '#00ffff']" backgroundColor="#093f5c">
                                        <div style="padding: 20px;text-align: left;">采购金额(亿元)</div>

                                    </dv-border-box-13>
                                </div>
                                <div>
                                    <dv-border-box-13 :color="['#4ba5c9', '#00ffff']" backgroundColor="#245b55">
                                        <div style="padding: 20px;text-align: center;">123.45</div>

                                    </dv-border-box-13>
                                </div>
                            </div>
                            <div class="no-grid-rows-box">
                                <div>
                                    <dv-border-box-13 :color="['#4ba5c9', '#00ffff']" backgroundColor="#093f5c">
                                        <div style="padding: 20px;text-align: left;">采购金额(亿元)</div>

                                    </dv-border-box-13>
                                </div>
                                <div>
                                    <dv-border-box-13 :color="['#4ba5c9', '#00ffff']" backgroundColor="#245b55">
                                        <div style="padding: 20px;text-align: right;">123.45</div>

                                    </dv-border-box-13>
                                </div>
                            </div>
                        </div>
                        <!-- 分割线 -->
                        <div class="line"></div>
                        <div class="rows-box">
                            <div class="wrap-box">
                                <div class="box-title">土地使用权让出</div>
                                <div class="box">
                                    <div>成交量（宗）</div>
                                    <div>9999</div>
                                </div>
                                <div class="box">
                                    <div>成交金额（亿元）</div>
                                    <div>9999</div>
                                </div>
                                <div class="box-title">土地使用权让出</div>
                                <div class="box">
                                    <div>成交量（宗）</div>
                                    <div>9999</div>
                                </div>
                                <div class="box">
                                    <div>成交金额（亿元）</div>
                                    <div>9999</div>
                                </div>
                            </div>
                            <div class="wrap-box">
                                <div class="box-title">土地使用权让出</div>
                                <div class="box">
                                    <div>成交量（宗）</div>
                                    <div>9999</div>
                                </div>
                                <div class="box">
                                    <div>成交金额（亿元）</div>
                                    <div>9999</div>
                                </div>
                                <div class="box-title">土地使用权让出</div>
                                <div class="box">
                                    <div>成交量（宗）</div>
                                    <div>9999</div>
                                </div>
                                <div class="box">
                                    <div>成交金额（亿元）</div>
                                    <div>9999</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </dv-border-box-11>
            </div>

            <div class="right-bottom">
                <dv-border-box-11 title="建设工程">
                    <div class="right-bottom-box">
                        <div class="wrap-box">
                            <div class="">
                                <dv-border-box-2>
                                    <div style="padding: 20px;">项目数量</div>
                                </dv-border-box-2>
                            </div>
                            <div class="">
                                <dv-border-box-2>
                                    <div style="padding: 20px;">项目数量</div>
                                </dv-border-box-2>
                            </div>
                            <div class="">
                                <dv-border-box-2>
                                    <div style="padding: 20px;">项目数量</div>
                                </dv-border-box-2>
                            </div>
                            <div class="">
                                <dv-border-box-2>
                                    <div style="padding: 20px;">项目数量</div>
                                </dv-border-box-2>
                            </div>
                            <div class="">
                                <dv-border-box-2>
                                    <div style="padding: 20px;">项目数量</div>
                                </dv-border-box-2>
                            </div>
                        </div>

                        <div id="ripe" style="width: 60%;height: 180px;"></div>
                    </div>
                </dv-border-box-11>
            </div>
        </div>
    </div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted } from "vue";

onMounted(() => {
    let chartRipe = document.getElementById("ripe");
    let constructionChart = echarts.init(chartRipe);
    let option;
    // 配置项
    option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c}宗 ({d}%)' // 鼠标悬停显示详情
        },
        legend: {
            orient: 'vertical',
            right: 10,
            top: 'center',
            textStyle: {
                fontSize: 14,
                color: '#fff'
            },
            data: ['公开招标', '邀请招标']
        },
        series: [
            {
                name: '招标类型',
                type: 'pie',
                radius: '50%',
                center: ['40%', '50%'], // 图表位置
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 5, // 扇形边缘圆角
                    borderColor: '#fff', // 扇形间隔白色边框
                    borderWidth: 2
                },
                label: {
                    show: true,
                    position: 'inside',
                    formatter: '{c}宗\n{d}%', // 内部显示：数量+百分比
                    fontSize: 14,
                    fontWeight: 'bold'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 16,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false // 隐藏标签连接线
                },
                data: [
                    { value: 770, name: '公开招标', itemStyle: { color: '#2ec7c9' } }, // 深青色
                    { value: 230, name: '邀请招标', itemStyle: { color: '#ff7d00' } }  // 橙色
                ]
            }
        ]
    };

    // 设置配置项
    constructionChart.setOption(option);

    let chartLan = document.getElementById("land");
    let landCart = echarts.init(chartLan);
    let lanOption;

    lanOption = {
        tooltip: {
            trigger: "item",
        },
        legend: {
            bottom: "1%",
            left: "center",
            textStyle: {
                color: "#fff",
            },
        },
        series: [
            {
                name: "Access From",
                type: "pie",
                radius: ["40%", "70%"],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: "center",
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: "bold",
                    },
                },
                labelLine: {
                    show: false,
                },
                data: [
                    { value: 1048, name: "Search Engine" },
                    { value: 735, name: "Direct" },
                    { value: 580, name: "Email" },
                    { value: 484, name: "Union Ads" },
                    { value: 300, name: "Video Ads" },
                ],
            },
        ],
    };

    lanOption && landCart.setOption(lanOption);
});
</script>

<style lang="scss" scoped>
.main {
    flex: 1;
    display: flex;
    margin-top: 20px;

    .left {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 30px;

        .left-top {
            .wrap-box {
                display: flex;
                flex-wrap: wrap;
                gap: 3%;
                padding: 60px 0px 20px 20px;

                .box {
                    flex-shrink: 0;
                    width: 30%;
                    margin-bottom: 16px;
                    padding-left: 6px;
                    border-left: 10px solid #01dbf9;
                    background-color: #033b59;
                }
            }
        }

        .left-middle {
            .rows-box {
                display: grid;
                grid-template-columns: 2fr 1fr;

                .wrap-box {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 3%;
                    padding: 60px 0px 20px 20px;

                    .box-title {
                        width: 93%;
                        padding: 6px 0px 6px 10px;
                        margin-bottom: 16px;
                        background-color: #02a5e9;
                        color: white;
                    }

                    .box {
                        flex-shrink: 0;
                        width: 45%;
                        margin-bottom: 16px;
                        padding-left: 6px;
                        border-left: 10px solid #01dbf9;
                        background-color: #033b59;
                    }
                }

                .columns-box {
                    display: flex;
                    flex-direction: column;
                    // gap: 3%;
                    padding: 60px 0px 20px 20px;

                    .box-title {
                        width: 70%;
                        margin-bottom: 16px;
                        background-color: #02a5e9;
                        color: white;
                    }

                    .box {
                        flex-shrink: 0;
                        width: 70%;
                        margin-bottom: 16px;
                        padding-left: 6px;
                        border-left: 10px solid #01dbf9;
                        background-color: #033b59;
                    }
                }
            }
        }

        .left-bottom {
            .chart-box {
                display: flex;
                padding: 30px 0px 20px 20px;
            }
        }
    }

    .center {
        flex: 1;
        padding: 50px;

        .wrap-box {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            padding: 48px;
            row-gap: 40px;

            .box {
                flex-shrink: 0;
                width: 40%;
                margin-bottom: 16px;

                .box-content {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    gap: 10px;
                    padding: 30px;

                    .title {
                        font-size: 18px;
                        color: #fff;
                    }

                    .value {
                        font-size: 26px;
                        color: #32e9b3;
                    }
                }
            }
        }
    }

    .right {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 10px;

        .right-top {
            .right-top-box {
                padding: 60px 0px 20px 20px;

                .no-grid-rows-box {
                    width: 92%;
                    display: grid;
                    grid-template-columns: 5fr 4fr;
                }

                .line {
                    width: 96%;
                    margin: 10px 0 10px 0;
                    border: 1px solid #01dbf9;
                }

                .rows-box {
                    display: grid;
                    grid-template-columns: 1fr 1fr;

                    .wrap-box {
                        display: flex;
                        flex-wrap: wrap;
                        gap: 3%;
                        // padding: 60px 0px 20px 20px;

                        .box-title {
                            width: 93%;
                            padding: 6px 0px 6px 10px;
                            margin-bottom: 16px;
                            background-color: #02a5e9;
                            color: white;
                        }

                        .box {
                            flex-shrink: 0;
                            width: 45%;
                            margin-bottom: 16px;
                            padding-left: 6px;
                            border-left: 10px solid #01dbf9;
                            background-color: #033b59;
                        }
                    }
                }

            }
        }

        .right-bottom {
            .right-bottom-box {
                padding: 20px 0px 20px 20px;

                .wrap-box {
                    display: flex;
                    flex-wrap: wrap;
                    column-gap: 15%;
                    row-gap: 10px;
                    padding: 8%;
                }
            }

        }
    }
}
</style>
